<template>
  <div>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEenter">
      <!-- <div class="ball" v-show="faget" ref="balls"></div> -->
      <div class="ball" v-show="faget" id="balls"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swipte :lunbotulist="datset" :list="false"></swipte>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{mages.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：
            <span class="fortow">￥{{mages.market_price}}</span>&nbsp;&nbsp; 销售价：
            <span class="fortows">￥{{mages.sell_price}}</span>
          </p>
          <p>
            购买数量：
            <stters @purchase="SelectedQuantityOfGoods" :max="mages.stock_quantity"></stters>
          </p>
          <button type="button" class="mui-btn mui-btn-success">立即购买</button>
          <button type="button" class="mui-btn mui-btn-success" @click="toujvbe">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{mages.goods_no}}</p>
          <p>库存情况：{{mages.stock_quantity}}件</p>
          <p>上架时间：{{mages.add_time|dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <button
          type="button"
          class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
          @click="fortbc"
        >图文介绍</button>
        <br />
        <button
          type="button"
          class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined"
          @click="commtens"
        >商品评论</button>
      </div>
    </div>
  </div>
</template>
<script>
import swipte from "../subComponents/siwap";
import stters from "../subComponents/buttonbox";
export default {
  data() {
    return {
      id: this.$route.params.id,
      datset: [],
      mages: {},
      faget: false,
      seoterColed:1//商品选中的数量
    };
  },
  created() {
    this.getfoir();
    this.gfuites();
  },
  methods: {
    //
    getfoir() {
      fetch("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
        .then(response => {
          //   console.log(response);
          if (response.status === 200) {
            return response.json();
          }
        })
        .then(res => {
          // console.log(res);
          res.message.forEach(item => {
            item.img = item.src;
          });
          this.datset = res.message;
        });
    },
    gfuites() {
      fetch("http://www.liulongbin.top:3005/api/goods/getinfo/" + this.id)
        .then(response => {
          if (response.status === 200) {
            return response.json();
          }
        })
        .then(res => {
          //   console.log(res);

          this.mages = res.message[0];
        });
    },
    fortbc() {
      this.$router.push("/home/ltuthu/" + this.id);
    },
    commtens() {
      this.$router.push("/home/commtens/" + this.id);
    },
    toujvbe() {
      this.faget = !this.faget;


      let goodshop={
        id:this.id,
        price:this.mages.sell_price,
        nobuer:this.seoterColed,
        selected:true
      };
      this.$store.commit("gotesfot",goodshop)
      // console.log(this.$store.commit("gotesfot",goodshop));
      
    },
    // 动画三件
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      // 小球的位置
      // let ihgfwulfh = this.$refs.balls.getBoundingClientRect();
      let ihgfwulfh = document.getElementById("balls").getBoundingClientRect();
      let ghsfiwulfh = document.getElementById("bats").getBoundingClientRect();
      let xcoft = ghsfiwulfh.left - ihgfwulfh.left;
      let ycoft = ghsfiwulfh.top - ihgfwulfh.top;

      el.style.transform = `translate(${xcoft}px,${ycoft}px)`;
      el.style.transition = "all 0.1s cubic-bezier(.09,.43,.79,.76)";
      done();
    },
    afterEenter(el) {
      this.faget = !this.faget;
    },
    SelectedQuantityOfGoods(core){
      this.seoterColed=core
      // console.log("你的"+this.seoterColed);
      
    }
  },
  components: {
    swipte,
    stters
  }
};
</script>
<style lang="less" scoped>
.mui-btn-success:last-child {
  background-color: red;
  border: none;
  margin-left: 5px;
}
.mui-card-footer {
  display: block;
  .mui-btn-block {
    padding: 0;
    margin-bottom: 0;
  }
}
.fortow {
  text-decoration: line-through;
}
.fortows {
  color: red;
  font-size: 18px;
}
.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 99;
  top: 445px;
  left: 78px;
}
</style>
